<!doctype html>
<html lang="en">
<head>
    <title>查询学生信息</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="container mt-3">
<div class="row">
    <div id="page1" class="col-md-5">
        <h3>查询学生信息</h3>
        <p>在下方输入框中填写学号或姓名，并选择查询学校。优先使用学号查询。</p>
        <form action="">
            <div class="form-group row">
                <label for="inputStuID" class="col-sm-3 col-form-label">学号</label>
                <div class="col-sm-9">
                    <input type="tel" class="form-control" id="inputStuID" name="inputStuID" placeholder="输入学号"
                           value="">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputStuName" class="col-sm-3 col-form-label">姓名</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="inputStuName" name="inputStuName" placeholder="输入姓名"
                           value="">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">选择学校</label>
                <div class="col-sm-9">
                    <select class="custom-select" id="selectStudent" name="selectStudent">
                        <option value="1" selected>唐山师范学院</option>
                        <option value="2">唐山学院</option>
                    </select>
                </div>
            </div>
        </form>
        <button class="btn btn-primary">查询信息</button>
    </div>
    <div id="page2" class="col-md-7  mt-5">

    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            var fromData=$("form").serialize();
            var screen_width = window.screen.width;
            if(screen_width < 425 ){
                location.href = "search.php?"+fromData;
                return;
            }
            $.ajax({
                type: "get",
                url: "search.php",
                data: fromData,
                async: false,
                success: function (databack) {
                    $("#page2").html(databack);
                },
                error: function (request) {
                    alert("提交失败，请重新再试");
                }
            });
        });
    });
</script>
</body>
</html>